<template>
  <div class="user-login-notification">
    <el-button type="primary" @click="handleUserLogin">
      模拟新用户登录
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'UserLoginNotification',
  methods: {
    // 处理用户登录事件
    handleUserLogin() {
      // 1. 显示成功消息
      this.showSuccessMessage();

      // 2. 播放语音提示
      this.playLoginVoice();
    },

    // 显示成功消息
    showSuccessMessage() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success',
        duration: 3000 // 消息显示时间(毫秒)
      });
    },

    // 播放登录语音
    playLoginVoice() {
      // 方案一：使用预先录制的音频文件
      // this.playAudioFile();

      // 方案二：使用浏览器TTS(文本转语音)功能
      this.playTextToSpeech();
    },

    // 方案一：播放音频文件
    playAudioFile() {
      // 假设你已经有一个"有新用户登录"的音频文件
      // 1. 首先在项目中准备音频文件，例如放在static目录下
      // 2. 创建Audio对象并播放
      const audio = new Audio();

      // 这里使用动态URL，你需要替换为实际的音频文件路径
      audio.src = require('@/mp3/Janji-Horizon.mp3');

      audio.play().catch(error => {
        console.error('音频播放失败:', error);
        // 如果音频播放失败，尝试使用TTS作为备选方案
        this.playTextToSpeech();
      });
    },

    // 方案二：使用文本转语音(TTS)功能
    playTextToSpeech() {
      // 检查浏览器是否支持SpeechSynthesis
      if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance('有新用户登录');

        // 可以设置语音参数
        utterance.lang = 'zh-CN'; // 中文
        utterance.rate = 1; // 语速(1为正常)
        utterance.pitch = 1; // 音高(1为正常)

        speechSynthesis.speak(utterance);

        // 错误处理
        utterance.onerror = (event) => {
          console.error('语音合成错误:', event.error);
        };
      } else {
        console.error('你的浏览器不支持文本转语音功能');
      }
    }
  }
};
</script>

<style scoped>
.user-login-notification {
  padding: 20px;
}
</style>